<template>
	<view class="house_sell">
		<view class="step_city">
			<text>城市</text>
			<text>(可在首页切换城市)</text>
			<text>
				{{cityinfo.title}}
			</text>
		</view>
		<!-- 选项 -->
		<view class="option_list">
			<view class="option_items" v-for="item in optionList" :key="item.type">
				<text class="op_ite_fl">{{item.type}}</text>
				<view class="op_ite_fr">
					<text style="color: #999;">{{item.info}}</text>
					<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
				</view>
			</view>
			<view class="le_hou_tit">
				<text class="hou_title">标题</text>
				<input class="hou_input" v-model="title" type="text" placeholder="请输入商品标题">
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">小区</text>
				<picker @change="bindPickerChange6" :value="house_typeindex" :range="communityList" range-key="community_name">
					<view class="op_ite_fr" v-if="communityindex==-1&&communityList.length!=0">
						<text>请选择</text>
						<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
					</view>
					<view class="op_ite_fr" v-if="communityindex==-1&&communityList.length==0">
						<text>暂无可选小区</text>
						<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
					</view>
					<view class="op_ite_fr" v-if="communityindex!=-1">
						<text>{{communityList[communityindex].community_name}}</text>
					</view>
				</picker>
			</view>	
			<view class="lease_img">
				<text class="hou_title">房屋主图</text>
				<view class="upload_img" @click="uplodimg">
					<u-upload :custom-btn="true" 
					:header="headers"
					ref="uUpload2"
					width="151" height="151"
					 :auto-upload="false"
					 :action="action" :file-list="fileList2" :max-size="5 * 1024 * 1024" max-count="1">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"
						style="height: 161rpx; 
						color: #909399; 
						text-align: center; 
						width: 151rpx; 
						padding-top: 30rpx; 
						display: flex;
						flex-direction: column;
						align-items: center;
						border: 1rpx dashed #909399;"
						>
							<u-icon name="camera" size="60" style="display: block;" color="#909399"></u-icon> 
							<text>图片管理</text>
						</view>
					</u-upload> 
				</view>
			</view>
			<!-- 房屋图片 -->
			<view class="lease_img">
				<text class="hou_title">房屋图片</text>
				<view class="upload_img">
					<u-upload :custom-btn="true" 
					:header="headers"
					ref="uUpload"
					width="151" height="151" :action="action" :file-list="fileList" :max-size="5 * 1024 * 1024" max-count="5">
						<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150"
						style="height: 161rpx; 
						color: #909399; 
						text-align: center; 
						width: 151rpx; 
						padding-top: 30rpx; 
						display: flex;
						flex-direction: column;
						align-items: center;
						border: 1rpx dashed #909399;"
						>
							<u-icon name="camera" size="60" style="display: block;" color="#909399"></u-icon> 
							<text>图片管理</text>
						</view>
					</u-upload> 
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">出售金额(元)</text>
				<view class="op_ite_fr">
					<input type="number" v-model="money" placeholder="请输入金额"/>
				</view>
			</view>
			<view class="option_items">
				<text class="op_ite_fl">最低首付(元)</text>
				<view class="op_ite_fr">
					<input type="number" v-model="down_payments" placeholder="请输入最低首付"/>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">面积(㎡)</text>
				<view class="op_ite_fr">
					<input type="number" v-model="area"  placeholder="请输入面积" />
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">户型</text>
				<view class="op_ite_fr">
					<input style="width: 60rpx;" type="number" v-model="room" placeholder="几"/>
					<text>室</text>
					<input style="width: 60rpx;" type="number"  v-model="hall" placeholder="几"  />
					<text>厅</text>
					<input style="width: 60rpx;" type="number"  v-model="toilet" placeholder="几" />
					<text>卫</text>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">楼层</text>
				<view class="op_ite_fr">
					<input type="number" v-model="nowlevel" placeholder="请输入楼层"/>
					<text>/</text>
					<input type="number"  v-model="maxlevel" value="" style="text-align: left;" placeholder="请输入最高楼层"/>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">朝向</text>
				<picker @change="bindPickerChange2" :value="directionindex" :range="optiondata.direction.values">
						<view class="op_ite_fr" v-if="directionindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="directionindex!=-1">
							<text>{{optiondata.direction.values[directionindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">装修</text>
				<picker @change="bindPickerChange3" :value="renovationindex" :range="optiondata.renovation.values">
						<view class="op_ite_fr" v-if="renovationindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="renovationindex!=-1">
							<text>{{optiondata.renovation.values[renovationindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">房屋类型</text>
				<picker @change="bindPickerChange4" :value="house_type1index" :range="optiondata.house_type1.values">
						<view class="op_ite_fr" v-if="house_type1index==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="house_type1index!=-1">
							<text>{{optiondata.house_type1.values[house_type1index]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">年份</text>
				<picker mode="date" :value="date" fields='year' :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="op_ite_fr" v-if="!year">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="year">
							<text>{{year}}</text>
						</view>
					</picker>
			</view>
			<!-- 基本介绍 -->
			<view class="lease_introduce">
				<text class="hou_title">基本介绍</text>
				<textarea maxlength="100" v-model="describe" class="intr_text" placeholder="请输入基本情况" />
				<view class="intr_num">
					<text>{{describeLength}}</text>/
					<text>100</text>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">联系人</text>
				<view class="op_ite_fr">
					<input type="text" v-model="username"  placeholder="请输入联系人"/>
				</view>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">称呼</text>
				<picker @change="bindPickerChange5" :value="sexindex" :range="sexarray">
						<view class="op_ite_fr" v-if="sexindex==-1">
							<text>请选择</text>
							<image class="op_ite_fr_img" :src="'https://community.chuangxiangdianli.com/images/neighborimg/arrow@2x.png'" mode=""></image>
						</view>
						<view class="op_ite_fr" v-if="sexindex!=-1">
							<text>{{sexarray[sexindex]}}</text>
						</view>
					</picker>
			</view>
			<view class="option_items" >
				<text class="op_ite_fl">电话<text style="color: #2BB2FF;
				font-size: 22rpx;">(已开启徇私保护)</text></text>
				<view class="op_ite_fr">
					<input type="number" v-model="phone"  placeholder="请输入电话"/>
				</view>
			</view>
		</view>
		
		<!-- 发布 -->
		<view class="lease_details_foo" @click="commit">
			<view class="foo_btn">发布</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {   
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				date: currentDate,
				optiondata:'',
				optionList: [
					// {type: '小区', info: '请选择'},
					// {type: '户型', info: '请选择'},
					// {type: '面积', info: '请选择'},
					// {type: '楼层', info: '请选择'},
					// {type: '朝向', info: '请选择'},
					// {type: '装修', info: '请选择'},
					// {type: '房屋类型', info: '请选择'},
					// {type: '电梯', info: '请选择'},
					// {type: '售价', info: '请选择'},
					// {type: '照片', info: '好照片会吸引更多买家'}, 
					// {type: '联系人', info: '请选择'}, 
					// {type: '称呼', info: '请选择'},  
				],
				action: 'https://community.chuangxiangdianli.com/api/Mini/circle/uploadImg',
				headers: {
					"Authorization": ''
				},
				fileList:[],
				fileList2:[],
				describeLength:0,
				communityList:[],
				sexarray:['先生','女士'],
				house_typeindex:-1, //户型
				directionindex:-1,  //朝向
				renovationindex:-1, //装修
				house_type1index:-1,//房屋类型
				communityindex:-1,
				sexindex:-1,
				yearindex:-1,
				cityinfo:'',
				title:'',
				money:'',
				area:'',
				nowlevel:'',
				maxlevel:'',
				username:'',    //联系人
				phone:'',      //电话
				year:'',      //年份
				down_payments:''  ,//最低首付
				describe:'',
				room:'',
				hall:'',
				toilet:'',
				id:'',
				houseInfo:''
			};
		},
		    computed: {
		        startDate() {
		            return this.getDate('start');
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
			onLoad(opt) {
				this.id=opt.id
				if(uni.getStorageSync('userInfo')){
					this.roomInfo = uni.getStorageSync('userInfo').roomInfo
					this.nickName = uni.getStorageSync('userInfo').nickName
					this.headers.Authorization = 'Bearer' + ' ' + uni.getStorageSync('userInfo').token
				}
				this.getcheckdata()
				var  cityinfo=uni.getStorageSync('cityinfo')
				if(cityinfo){
					this.cityinfo=cityinfo
				}
				this.getAllCommunity(this.cityinfo.data)
				if(this.id){
					this.renderpage()
				}
			},
			onShow() {

		},
		watch: {
			describe(newValue, oldValue){
				this.describeLength=newValue.length
			}
		},
		methods:{
			uplodimg(){
				this.$refs.uUpload2.upload();
			},
			renderpage(){
					this.$mrequest2({
						url:'Mini/circle/house/sell/'+this.id,
						method:'GET'
					}
					).then((res)=>{
						res.data.imgarr=res.data.images.split(',')
						if(res.data.images.length>0){
							if(res.data.images.indexOf(','!=-1)){
								res.data.imagesArry=res.data.images.split(',');
							}else{
								res.data.imagesArry=[]
								res.data.imagesArry.push(res.data.images)
							}
							
						}
						this.houseInfo=res.data
						this.title=this.houseInfo.title
						for(var i=0;i<this.houseInfo.imagesArry.length;i++){
							this.fileList.push({
								url:this.houseInfo.imagesArry[i]
							})
						}
						this.fileList2.push({
							url:this.houseInfo.image
						})
						this.money=this.houseInfo.money
						this.down_payments=this.houseInfo.down_payments
						this.hall=this.houseInfo.hall
						this.area=this.houseInfo.area
						this.room=this.houseInfo.room
						this.toilet=this.houseInfo.toilet
						this.describe=this.houseInfo.describe
						this.year=this.houseInfo.year
						this.username=this.houseInfo.username
						this.phone=this.houseInfo.phone
						this.nowlevel=this.houseInfo.storey.split('/')[0]
						this.maxlevel=this.houseInfo.storey.split('/')[1]
						// 小区
						var communitycount=0
						console.log(this.communityList.length)
						for(var i=0;i<this.communityList.length;i++){
							if(this.communityList[i].community_id==this.houseInfo.community.community_id&&this.communityList[i].community_name==this.houseInfo.community.community_name){
								this.communityindex=i
								communitycount++
						}
						}
						if(communitycount==0){
							this.communityList.unshift(this.houseInfo.community)
							this.communityindex=0
						}
						//朝向
						var directioncount=0
						for(var i=0;i<this.optiondata.direction.values.length;i++){
							if(this.optiondata.direction.values[i]==this.houseInfo.direction){
								this.directionindex=i
								directioncount++
							}
						}
						if(directioncount==0){
							this.optiondata.direction.values.unshift(this.houseInfo.direction)
							this.directionindex=0
						}
						//装修
						var renovationcount=0
						for(var i=0;i<this.optiondata.renovation.values.length;i++){
							if(this.optiondata.renovation.values[i]==this.houseInfo.renovation){
								this.renovationindex=i
								renovationcount++
							}
						}
						if(renovationcount==0){
							this.optiondata.renovation.values.unshift(this.houseInfo.renovation)
							this.renovationindex=0
						}
						//房屋类型 house_type1
						var house_type1count=0
						for(var i=0;i<this.optiondata.house_type1.values.length;i++){
							console.log(this.optiondata.house_type1.values[i]+'---------'+this.houseInfo.house_type)
							if(this.optiondata.house_type1.values[i]==this.houseInfo.house_type){
								this.house_type1index=i
								house_type1count++
							}
						}
						
						if(house_type1count==0){
							this.optiondata.house_type1.values.unshift(this.houseInfo.house_type)
							this.house_type1index=0
						}
						//称呼 sexindex
						for(var i=0;i<this.sexarray.length;i++){
							if(this.houseInfo.call==this.sexarray[i]){
								this.sexindex=i
							}
						}
					})
			},
			commit(){
				if(this.title.length==0){
					uni.showToast({
						title:'标题不能为空',
						icon:'none'
					})
					return
				}
				if(this.communityindex==-1){
					uni.showToast({
						title:'请选择小区',
						icon:'none'
					})
					return
				}
				if(!this.$refs.uUpload2.lists[0]){
					uni.showToast({
						title:'请提交房屋主图',
						icon:'none'
					})
					return
				}
				if(this.$refs.uUpload.lists.length==0){
					uni.showToast({
						title:'请提交房屋图片',
						icon:'none'
					})
					return
				}
				if(!this.money){
					uni.showToast({
						title:'请输入出售金额',
						icon:'none'
					})
					return
				}
				if(!this.down_payments){
					uni.showToast({
						title:'请输入最低首付',
						icon:'none'
					})
					return
				}
				if(!this.area){
					uni.showToast({
						title:'请输入面积',
						icon:'none'
					})
					return
				}
				if(this.room.length==0||this.hall.length==0||this.toilet.length==0){
					uni.showToast({
						title:'请输入户型',
						icon:'none'
					})
					return
				}
				if(!this.nowlevel){
					uni.showToast({
						title:'请输入当前楼层',
						icon:'none'
					})
					return
				}
				if(!this.maxlevel){
					uni.showToast({
						title:'请输入最高楼层',
						icon:'none'
					})
					return
				}
				if(this.maxlevel<this.nowlevel){
					uni.showToast({
						title:'当前楼层不能大于最高楼层',
						icon:'none'
					})
					return
				}
				if(this.directionindex==-1){
					uni.showToast({
						title:'请选择朝向',
						icon:'none'
					})
					return
				}
				if(this.renovationindex==-1){
					uni.showToast({
						title:'请选择装修',
						icon:'none'
					})
					return
				}
				if(this.house_type1index==-1){
					uni.showToast({
						title:'请选择房屋类型',
						icon:'none'
					})
					return
				}
				if(!this.year){
					uni.showToast({
						title:'请选择年份',
						icon:'none'
					})
					return
				}
				if(this.describe.length==0){
					uni.showToast({
						title:'基本介绍不能为空',
						icon:'none'
					})
					return
				}
				if(this.username&&this.username.length==0){
					uni.showToast({
						title:'请输入联系人',
						icon:'none'
					})
					return
				}
				if(this.sexindex==-1){
					uni.showToast({
						title:'请选择称呼',
						icon:'none'
					})
					return
				}
				if(this.phone.length==0){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				var data={}
				var images=''
				var image=''
				console.log(this.$refs.uUpload.lists)
				console.log(this.$refs.uUpload2.lists)
				
				for(var i=0;i<this.$refs.uUpload.lists.length;i++){
					if(this.$refs.uUpload.lists[i].response){
						images=images+this.$baseImgUrl+this.$refs.uUpload.lists[i].response.data.path+','
					}else{
						images=images+this.$refs.uUpload.lists[i].url+','
					}
				}
				images=images.substring(0,(images.length-1))
				if(this.$refs.uUpload2.lists[0]){
					if(this.$refs.uUpload2.lists[0].response){
						image=this.$baseImgUrl+this.$refs.uUpload2.lists[0].response.data.path
					}else{
						image=this.$refs.uUpload2.lists[0].url
					}
				}
				data.images=images
				data.image=image
				data.title=this.title
				data.money=this.money
				data.year=this.year
				data.area=this.area
				data.house_type=this.optiondata.house_type1.values[this.house_type1index]
				data.community_id=this.communityList[this.communityindex].community_id
				data.down_payments=this.down_payments
				data.room=this.room
				data.hall=this.hall
				data.toilet=this.toilet
				data.describe=this.describe
				data.renovation=this.optiondata.renovation.values[this.renovationindex]
				data.hall=this.area
				data.storey=this.nowlevel+'/'+this.maxlevel
				data.direction=this.optiondata.direction.values[this.directionindex]
				data.call=this.sexarray[this.sexindex]
				data.phone=this.phone
				console.log(data)
					
				if(this.id){
					this.$mrequest2({
						url:'Mini/circle/house/sell/'+this.id,
						method:"PUT",
						data,
					}
					).then((res)=>{
						console.log(res)
						if(res.code==200){
							uni.showToast({
								title:'发布成功',
								success: () => {
									// uni.removeStorageSync('labelData')
									uni.navigateBack()
								}
							})
						}
					
						
					})
				}else{
					this.$mrequest2({
						url:'Mini/circle/house/sell',
						data,
					}
					).then((res)=>{
						console.log(res)
						if(res.code==200){
							uni.showToast({
								title:'发布成功',
								success: () => {
									// uni.removeStorageSync('labelData')
									uni.navigateBack()
								}
							})
						}
					
						
					})
				}

			},
			//获取小区
				getAllCommunity(cityInfo){
					let {province_id,city_id,area_id} = cityInfo 
					this.$http.get('wechat/allCommunity/' + province_id + '/' + city_id + '/' + area_id).then(res => { 
						if(res.code == 200){ 
							this.communityList = res.data
							console.log(res.data)
						}
					})
				},
				getcheckdata(){
								this.$http.get('Mini/circle/house/getOption').then(res => {
									console.log(res)
									this.optiondata=res.data
								})
				},
				 bindDateChange: function(e) {
				       this.year = e.target.value
					   console.log(this.year)
				   },
				bindPickerChange: function(e) {
				           console.log('picker发送选择改变，携带值为', e.target.value)
				           this.house_typeindex = e.target.value
				 },
				 bindPickerChange2: function(e) {
				            console.log('picker发送选择改变，携带值为', e.target.value)
				            this.directionindex = e.target.value
				  },
				  bindPickerChange3: function(e) {
				             console.log('picker发送选择改变，携带值为', e.target.value)
				             this.renovationindex = e.target.value
				   },
				bindPickerChange4: function(e) {
				           console.log('picker发送选择改变，携带值为', e.target.value)
				           this.house_type1index = e.target.value
				 },
				 bindPickerChange5: function(e) {
				            console.log('picker发送选择改变，携带值为', e.target.value)
				            this.sexindex = e.target.value
				  },
				bindPickerChange6: function(e) {
				           console.log('picker发送选择改变，携带值为', e.target.value)
				           this.communityindex = e.target.value
				 }, 
				 getDate(type) {
				     const date = new Date();
				     let year = date.getFullYear();
				     let month = date.getMonth() + 1;
				     let day = date.getDate()
				     if (type === 'start') {
				         year = year - 60;
				     } else if (type === 'end') {
				         year = year ;
				     }
				     month = month > 9 ? month : '0' + month;;
				     day = day > 9 ? day : '0' + day;
				     return `${year}-${month}-${day}`;
				 }
		}
	}
</script>

<style lang="scss">
.house_sell{
	height: 100vh;
	font-size: 30rpx;
	background-color: #f7f8f9;
	.step_city{
		margin-bottom: 10rpx;
		padding: 0 33rpx;
		height: 109rpx;
		line-height: 109rpx; 
		background-color: #fff;
		& text:nth-child(2){
			margin-left: 10rpx;
			color: #2BB2FF;
			font-size: 24rpx;
		}
		& text:nth-child(3){
			float: right;
		}
	}
	.option_list{ 
		padding: 0 30rpx 30rpx 30rpx;
		background-color: #fff;
		.option_items{
			display: flex;
			justify-content: space-between;
			height: 119rpx;
			line-height: 119rpx;
			border-bottom: 1rpx solid #a5a5a5;
			.op_ite_fr{
				display: flex;
				align-items: center;
				&>input{
					font-size: 28rpx;
					text-align: right;
					width: 200rpx;
				}
				.op_ite_fr_img{
					margin: auto 0;
					margin-left: 10rpx;
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
	}
	.lease_details_foo{
		position: relative;
		height: 160rpx;
		background-color: #f7f8f9;
		.foo_btn{
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 670rpx;
			height: 96rpx;
			line-height: 96rpx;
			text-align: center;
			font-size: 32rpx;
			color: #fff;
			background: #FF7430;
			border-radius: 48rpx; 
		}
	}
}		.hou_title {
			display: block;
			font-size: 32rpx;
			font-weight: 700;
			height: 115rpx;
			line-height: 115rpx;
		}
		.le_hou_tit {
			// padding: 0 30rpx;
			height: 196rpx;
			background-color: #fff;
			border-bottom: 1px solid #a5a5a5;
			.hou_input {
				font-size: 30rpx;
				color: #8A8A8A;
			}
		}
		.lease_introduce{
			position: relative;
			margin-top: 16rpx;
			// padding: 0 30rpx;
			border-bottom: 1px solid #a5a5a5;
			height: 284rpx;
			background-color: #fff;
			.intr_text{
				height: 130rpx;
				font-size: 30rpx;
			}
			.intr_num{
				position: absolute; 
				right: 30rpx;
				bottom: 20rpx;
			}
		}
		.lease_img{
			// padding: 0 30rpx;
			margin-top: 16rpx;
			min-height: 322rpx;
			background-color: #fff; 
			border-bottom: 1px solid #a5a5a5;
		}
</style>

